<!doctype html><!--用来声明这是一个网页文件 html5 兼容模式-->
<html><!--根目录标签 html:超文本标记语言,由很多标签标记的这样一门语言-->
	<head><!--头部:不可视标签-->
		<!--网页三要素-->
		<meta charset="utf-8"><!--万国码-->
		<title>英语沙龙邀请函</title>
		<meta name="keywords" content="英语沙龙邀请函"><!--关键词,seo优化-->
		<meta name="description" content=""><!--页面描述-->
		<style>
		    body{font-family: "Microsoft YaHei",serif;}
            body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}
            ol,ul,li{margin:0;padding:0;list-style:none;}
            img{border:none;}
			.clearfix:after{
				content: '';
				display: block;
				clear: both;
			}
        </style>
		<script>
            ;(function(designWidth, maxWidth) {
                var doc = document,
                    win = window,
                    docEl = doc.documentElement,
                    remStyle = document.createElement("style"),
                    tid;

                function refreshRem() {
                    var width = docEl.getBoundingClientRect().width;
                    maxWidth = maxWidth || 540;
                    width>maxWidth && (width=maxWidth);
                    var rem = width * 100 / designWidth;
                    remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
                }

                if (docEl.firstElementChild) {
                    docEl.firstElementChild.appendChild(remStyle);
                } else {
                    var wrap = doc.createElement("div");
                    wrap.appendChild(remStyle);
                    doc.write(wrap.innerHTML);
                    wrap = null;
                }
                //要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
                refreshRem();

                win.addEventListener("resize", function() {
                    clearTimeout(tid); //防止执行两次
                    tid = setTimeout(refreshRem, 300);
                }, false);

                win.addEventListener("pageshow", function(e) {
                    if (e.persisted) { // 浏览器后退的时候重新计算
                        clearTimeout(tid);
                        tid = setTimeout(refreshRem, 300);
                    }
                }, false);

                if (doc.readyState === "complete") {
                    doc.body.style.fontSize = "16px";
                } else {
                    doc.addEventListener("DOMContentLoaded", function(e) {
                        doc.body.style.fontSize = "16px";
                    }, false);
                }
            })(640, document.documentElement.clientWidth);
		</script>
        <link rel="stylesheet" href="css/swiper.min.css">
        <link rel="stylesheet" href="css/animation.css">
        <link rel="stylesheet" href="css/index.css">
	</head>
	<body><!--身体:可视化标签-->
		<section class="main clearfix">
			<!--加载页-->
			<article class="loading" id="loading">
                <div class="progress">
                        <div class="progress-bar"></div>
                </div>
			</article>
            <div class="swiper-container" id="swiper">
                <div class="swiper-wrapper">
                    <!--/*邀请函首页面*/-->
                    <div class="index swiper-slide" id="index">
                        <div class="content">
                            <div class="parper">
                                <img src="img/item.png" alt="" class="item">
                            </div>
                            <div class="letterTop">
                                <img src="img/invitation.png" class="index-title">
                            </div>
                            <div class="letterBot">
                                <div class="arrange">
                                    <p><img src="img/rotate.webp" alt="" class="rotate"></p>
                                    <p class="time">2019年4月13日 晚上18:30--19:30</p>
                                    <p class="address">中科大管理学院MBA中心J505</p>
                                </div>
                            </div>
                            <img src="img/rope.webp" alt="" class="rope">
                            <img src="img/leaf.webp" alt="" class="leaf">
                            <img src="img/arrow.png"  class="arrow">
                        </div>
                    </div>
                    <!--邀请信息页面-->
                    <div class="invit swiper-slide" id="invit">
                        <div class="content">
                            <div class="title">诚挚邀请</div>
                            <div class="parper">
                                <div class="passage">
                                    <p>亲爱的同学，您好！</p>
                                    <span>
                                    我们诚挚邀请您参加于2019年4月13日参加第一场雅思英语沙龙，本次活动邀请环球雅思的教师，和数位外教，进行现场的英语交流和模拟招聘时的指导。谨此，我们诚挚的邀请您的出席，衷心感谢您的支持和指导！
                                </span>
                                </div>
                            </div>
                            <img src="img/rope.webp" alt="" class="rope">
                            <img src="img/arrow.png"  class="arrow">
                        </div>
                    </div>
                    <!--讲师信息页面-->
                    <div class="teacher swiper-slide" id="teacher">
                        <div class="content">
                            <div class="title">关于讲师</div>
                            <div class="parper">
                                <img src="img/teacher.jpg" alt="" id="teacher-img">
                                <div class="passage">
                                    <p>讲师履历</p>
                                    <span class="gap">
                                    xxx老师，是环球雅思学校雅思资深口语主讲，在我校教龄7年以上，雅思8分，口语8分。本科就读于威尔士卡迪夫大学，硕士就读于伦敦大学商学院，任职于英国广播公司BBC。
                                </span>
                                    <p>授课特色</p>
                                    <span>
                                    教学体系成熟，口语话题分类清晰，分析新颖透彻，从逻辑角度引导学生迅速理清表达思路，短期内流利表达英语口语。
                                </span>
                                </div>
                            </div>
                            <img src="img/rope.webp" alt="" class="rope">
                            <img src="img/arrow.png"  class="arrow">
                        </div>
                    </div>
                    <!--活动详情页面-->
                    <div class="detail swiper-slide" id="detail">
                        <div class="content">
                            <div class="title">活动详情</div>
                            <div class="parper">
                                <ul class="detail-list">
                                    <li>
                                        <p>活动时间</p>
                                        <p>2019年4月13日 18:30--19:30</p>
                                    </li>
                                    <li>
                                        <p>活动地点</p>
                                        <p>中科大管理学院MBA中心J505</p>
                                    </li>
                                    <li>
                                        <p>主办单位</p>
                                        <p>第十五届MBA联合会学习部</p>
                                    </li>
                                </ul>
                            </div>
                            <img src="img/rope.webp" alt="" class="rope">
                            <img src="img/arrow.png"  class="arrow">
                        </div>
                    </div>
                    <!--活动主题页面-->
                    <div class="theme swiper-slide" id="theme">
                        <div class="content">
                            <div class="title">活动主题</div>
                            <div class="parper">
                                <div class="wheel whee-1">
                                    <img src="img/wheel-star.webp" alt="" class="wheel-star">
                                    <span class="wheel-word">英语沙龙</span>
                                </div>
                                <div class="wheel whee-2">
                                    <img src="img/wheel-star.webp" alt="" class="wheel-star">
                                    <span class="wheel-word">雅思专场</span>
                                </div>
                                <div class="wheel whee-3">
                                    <img src="img/wheel-star.webp" alt="" class="wheel-star">
                                    <span class="wheel-word">招聘模拟</span>
                                </div>
                                <div class="wheel whee-4">
                                    <img src="img/wheel-star.webp" alt="" class="wheel-star">
                                    <span class="wheel-word">文化沟通</span>
                                </div>
                                <div class="wheel whee-5">
                                    <img src="img/wheel-star.webp" alt="" class="wheel-star">
                                    <span class="wheel-word">学习进步</span>
                                </div>
                            </div>
                            <!--<div class="letterBot">-->
                            <!--</div>-->
                            <img src="img/rope.webp" alt="" class="rope">
                            <img src="img/arrow.png"  class="arrow">
                        </div>
                    </div>
                    <!--预约报名页面-->
                    <div class="apply swiper-slide" id="apply">
                        <div class="content">
                            <div class="title">预约报名</div>
                            <div class="parper">
                                <img src="img/tip.png" alt="" class="tip">
                                <img src="img/qr-code.jpg" class="qr-code">
                            </div>
                            <img src="img/rope.webp" alt="" class="rope">
                        </div>
                    </div>
		        </div>
            </div>
        </section>
        <!--竖屏提示 begin-->
        <div id="orientLayer" class="mod-orient-layer">
            <div class="mol_content">
                <div class="mol_desc">为了更好的体验，请使用竖屏浏览</div>
            </div>
        </div>
        <!--竖屏提示 end-->
        <script src="js/zepto.min.js"></script>
        <script src="js/touch.js"></script>
        <script src="js/swiper.min.js"></script>
        <script src="js/orientLayer.js"></script>
        <script src="js/index.js"></script>
    </body>
</html>